<template>
  <div class="box">
    <button class="my-button" @click="increment">方法修改: result {{ objCount.count }}</button>
  </div>
</template>

<!-- 组合式api setup语法糖 -->
<!-- 不再需要export default, setup()方法, 以及return -->
<!-- 钩子函数 -->
<!-- 
 beforeMount -> onBeforeMount, mounted -> onMounted, beforeUpdate -> onBeforeUpdate,
 updated -> onUpdated, beforeDestroy -> onBeforeUnmount, destroyed -> onUnmounted 
 -->
<script setup>

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'

const objCount = ref({
  count: 0
})

onBeforeMount(()=>{
  console.log('onBeforeMount...')
})

onMounted(()=>{
  console.log('onMounted...')
})

onBeforeUpdate(()=>{
  console.log('onBeforeUpdate...')
})

onUpdated(()=>{
  console.log('onUpdated...')
})

const increment = () => {
  console.log(objCount) // 这里的objCount是通过reactive转换为响应式数据的一个Proxy实例
  objCount.value.count++
}

</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.my-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 15px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}
</style>
